<template>
	<view class="layer">
		<IndexHead :config="navConfig"/>
		
		<!-- 认证信息 -->
		<!-- <view class="renzheng">
			<view>
				<view class="SG">┃</view><i>认证信息</i>
			</view>
		</view> -->
		<!-- <view class="table1">
			<form action="">
				<view class="order-info-line">
					<text class="order-label">姓 名</text>
					<input type="text" placeholder="输入姓名" placeholder-style="color:#999999;" class="order-input">
				</view>
				<view class="order-info-line">
					<text class="order-label">联系方式</text>
					<input type="text" placeholder="输入手机号码" placeholder-style="color:#999999;" class="order-input">
				</view> -->
				<!-- <hr><br> -->
				<!-- <view><input class="two" confirmtype="text" placeholder="输入验证码"/><view class="huoqu"><navigator>获取验证码</navigator></view></view> -->
				<!-- <hr><br> -->
				<!-- <view class="order-info-line">
					<text class="order-label">绑定邮箱</text>
					<input type="text" placeholder="输入邮箱号码" placeholder-style="color:#999999;" class="order-input">
				</view>
			</form>
		</view> -->
		
		<!-- 识别认证 -->
		<view class="shibie">
			<view>
				<view class="SG">┃</view><i>识别认证</i>
			</view>
		</view>
		<view class="wenzi">请确认您的身份信息</view>
		<view class="table2">
			<view class="order-info-line">
				<text class="order-label">姓 名</text>
				<i>**杰</i>
			</view>
			<view class="order-info-line">
				<text class="order-label">身份证号</text>
				<i>220************624</i>
			</view>
			<view>	
				<view class="kOne">
					<view class="rect">
						<image src="/static/myPic/renxiang.png" mode=""></image>
					</view>
				</view>
				<view class="kTwo">
					<view class="rect">
						<image src="/static/myPic/guohui.png" mode=""></image>
					</view>
				</view>
			</view>
			<view>
				<view class="kThree">
					<view class="rect">
						<view class="threeK">
							<image src="/static/myPic/shouchi.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 采集 -->
		<!-- <view class="btn">
			<navigator>完成实名</navigator>
		</view> -->
		
		<!-- 人像照片 -->
		<view class="shibie">
			<view>
				<view class="SG">┃</view><i>人像照片</i>
			</view>
		</view>
		<view class="renxiang">
			<image src="../../../../static/myPic/renlian2.png"></image>
		</view>
		
		<!-- 上一步 -->
		<navigator url="/pages/my/myRealName/realName" class="next">
			<image src="../../../../static/myPic/shangyibu.png" ></image>
			<text>上一步</text>
		</navigator>
		<!-- 完成实名 -->
		<navigator class="btn" url="">
			<text>完成实名</text>
		</navigator>
		
	</view>
</template>

<script>
	export default{
			data(){
				return{
					navConfig:{
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							hasMenu:false,
							hasTitle:true,
							minHead:true,
						},
						left: {
							img:'',
							text:'',
						},
						mid:{
							title:'实名认证',
							hasSearchMid:false
						},
						right:{
							
						}
					},
					curTabIndex: 0,
				}
			}
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		background-color: #fff;
	}
	
	
	/* 认证信息 */
	.renzheng{
		width: 540upx;
		margin-top: 20upx;
		margin-left: 6upx;
		height:27upx;
	}
	.renzheng .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.renzheng i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	
	.table1{
		width: 690upx;
		height: 400upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 37upx;
		border-radius: 15upx;
		
	}
	.table1 .two>view{display: inline-block;}
	form view{
		display: block;
	}
	.table1 label{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 30upx;
		float: left;
	}
	.table1 .one{  
		margin-left: 68upx;
		margin-top: 34upx;
		width: 166upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.table1 hr{
		float: left;
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 70upx;
	}
	.table1 .two{
		float: left;
		width: 138upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		margin-left: 52upx;
		margin-top: 40upx;
		margin-bottom: 30upx;
	}
	.order-info-line{
		width: 614upx;
		margin-top: 34upx;
		margin-left: 22upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 30upx;
		height: 50upx;
		padding-top: 22upx;
		margin-left: 30upx;
	}
	.order-info-line i{
		height: 30upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 80upx;
	}
	.table1 .huoqu{
		margin-top: 38upx;
		margin-left: 306upx;
		width: 150upx;
		height: 56upx;
		background: #54B1FF;
		border-radius: 25upx;
		float: left;
	}
	.table1 .huoqu navigator{
		margin-left: 11upx;
		padding: 12upx 16upx 17upx 5upx;
		width: 130upx;
		height: 17upx;
		font-size: 22upx;
		font-family: Microsoft YaHei Regular;
		color: #fff;
	}
	/* 识别认证 */
	.shibie{
		margin-top: 33upx;		
		margin-left: 6upx;
		height:27upx;
	}
	.shibie .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.shibie i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	.table2{
		position: relative;
		margin-left: 31upx;
		margin-top: 36upx;
		width: 690upx;
		height: 800upx;
		border-radius: 15upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		
	}
	.order-info-line{
		width: 614upx;
		margin-top: 34upx;
		margin-left: 22upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 173upx;
		display: block;
		line-height: 50upx;
		font-size: 30upx;
		height: 50upx;
		padding-top: 22upx;
		margin-left: 30upx;
	}
	.order-input{
		height: 50upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 80upx;
	}
	.wenzi{
		/* margin-left: 28upx;
		margin-top: 34upx; */
		padding: 28upx 0 0 28upx;
		width: 340upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(102,102,102,1);
		line-height: 29upx;
		margin-left: 40upx;
		margin-top: 43upx;
	}
	.table2 .kOne image{
		margin-top: 34upx;
		float: left;
		margin-left: 10upx;
		width: 330upx;
		height: 256upx;
		background-color: #F4F8FE;
		border-radius: 20upx;
	}
	/* .kOne image{
		margin-top: 41upx;
		margin-left: 58upx;
		width: 184upx;
		height: 118upx;
	} */
	./* kOne .di{
		margin-top: 34upx;
		width: 298upx;
		height: 55upx;
		background: #4280F2;
		border-radius: 0 0 10upx 10upx;
		position: absolute;
	}
	.kOne .di i{
		margin-left: 61upx;
		margin-top: 11upx;
		width: 180upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #fff;
		line-height: 29upx;
	} */
	.table2 .image-border{
		position: absolute;
		width: 220upx;
		height: 144upx;
	}
	.table2 .image-border1{
		top: 0;
		left: 0;
		border-left: 5upx solid #4280F2;
		border-top: 5upx solid #4280F2;
	}
	.table2 .image-border2{
		top: 0;
		right: -2px;
		border-right: 5upx solid #4280F2;
		border-top: 5upx solid #4280F2;
	}
	.table2 .image-border3{
		bottom: 0;
		left: 0;
		border-bottom: 5upx solid #4280F2;
		border-left: 5upx solid #4280F2;
	}
	.table2 .image-border4{
		bottom: 0;
		right: -2px;
		border-right: 5upx solid #4280F2;
		border-bottom: 5upx solid #4280F2;
	}
	
	/* 国徽 */
	.table2 .kTwo image{
		float: left;
		margin-left: 10upx;
		margin-top: 34upx;
		width: 330upx;
		height: 256upx;
		background-color: #F4F8FE;
		border-radius: 20upx;
	}
	/* .kTwo image{
		margin-top: 41upx;
		margin-left: 57upx;
		width: 184upx;
		height: 119upx;
	}
	.kTwo .di{
		margin-top: 34upx;
		width: 298upx;
		height: 55upx;
		background: #4280F2;
		border-radius: 0 0 10upx 10upx;
		position: absolute;
	}
	.kTwo .di i{
		margin-left: 61upx;
		margin-top: 11upx;
		width: 180upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #fff;
		line-height: 29upx;
	} */
	/* 手持身份证 */
	
	.table2 .kThree{
		float: left;
		margin-left: 179upx;
		margin-top: 36upx;
		width: 330upx;
		height: 234upx;
		background-color: #F4F8FE;
		border-radius: 20upx;
	}
	.table2 .threeK {
		width: 300upx;
		height: 205upx;
		/* background: #fff; */
		background-color: #FFFFFF;
		margin-left: 15upx;
		margin-top: 15upx;
	}
	.kThree image{
		margin-left: 65upx;
		width: 188upx;
		height:205upx;
	}
	.kThree .di{
		position: absolute;
		margin-top: 34upx;
		width: 294upx;
		height: 49upx;
		background: #4280F2;
		border-radius: 0 0 10upx 10upx;
	}
	.kThree .di i{
		margin-left: 40upx;
		margin-top: 11upx;
		width: 250upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #fff;
		line-height: 29upx;
	}
	
	/*人像照片*/
	.renxiang{
		width: 690upx;
		height: 463upx;
		opacity: 1;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-top: 50upx;
		margin-left: 30upx;
		border-radius: 15upx;
	}
	.renxiang image{
		margin-left: 212upx;
		margin-top: 46upx;
		width: 260upx;
		height: 235upx;
	}
	
	/*上一步*/
	.next{
		width: 188upx;
		height: 52upx;
		margin-left: 270upx;
		margin-top: 63upx;
		border-radius: 35upx;
		margin-bottom: 34upx;
	}
	.next text{
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: rgba(86,148,255,1);
		margin-left: 30upx;
		margin-top: 0upx;
	}
	.next image{
		width: 29upx;
		height: 30upx;
		margin-left: 21upx;
		float: left;
		margin-top: 15upx;
	}	
	
	/* 采集 */
	.btn{
		width: 388upx;
		height: 72upx;
		margin-left: 181upx;
		margin-top: 94upx;
		margin-bottom: 34upx;
		border-radius: 35upx;
		background-image: linear-gradient(to right, #54B0FF,#577AFF);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
	}
	.btn text{
		width: 120upx;
		height: 26upx;
		padding: 17upx 0 0 139upx;
		font-size: 28upx;
		color: #fff;
		position: absolute;
	}
</style>
